import React, { Fragment } from "react";
import { Link } from "react-router-dom";

import Routes from "../../routes/index.js";
import {
  FileOutlined,
  PieChartOutlined,
  UserOutlined,
} from "@ant-design/icons";
import { Layout, Menu } from "antd";
import { useState } from "react";
import "./index.css";
const { Header, Content, Footer, Sider } = Layout;
function MainComp(props) {
  const [collapsed, setCollapsed] = useState(false);
  const urlShow = {
    "/home": ["mail"],
    "/ques": ["mail1"],
    "/system": ["mail2"],
  };
  console.log(123);
  return (
    <Fragment>
      <Layout
        style={{
          minHeight: "100vh",
        }}
      >
        <Sider
          collapsible
          collapsed={collapsed}
          onCollapse={(value) => setCollapsed(value)}
          collapsedWidth={0}
          key={urlShow[props.location.pathname]}
        >
          <div
            className="logo"
            style={{
              height: "32px",
              margin: "16px",
              background: "rgba(255, 255, 255, 0.3)",
              color: "white",
              textAlign: "center",
              lineHeight: "32px",
              display: `${collapsed ? "none" : "block"}`,
            }}
          >
            知识竞赛
          </div>
          <Menu
            theme="dark"
            defaultSelectedKeys={urlShow[props.location.pathname]}
            mode="inline"
          >
            <Menu.Item key="mail" icon={<FileOutlined />}>
              <Link to={`/home`}>
                <span className="title"> 首页</span>
              </Link>
            </Menu.Item>
            <Menu.Item key="mail1" icon={<PieChartOutlined />}>
              <Link to={`/ques`}>
                <span className="title"> 答题</span>
              </Link>
            </Menu.Item>
            <Menu.Item key="mail2" icon={<UserOutlined />}>
              <Link to={`/system`}>
                <span className="title"> 配置</span>
              </Link>
            </Menu.Item>
          </Menu>
        </Sider>
        <Layout className="site-layout">
          <Header
            className="site-layout-background"
            style={{
              padding: 0,
              height: "110px",
            }}
          />

          <Content className="site-layout-content">
            <div
              style={{
                padding: "20px",
              }}
            >
              <Routes />
            </div>
          </Content>
        </Layout>
      </Layout>
    </Fragment>
  );
}

export default MainComp;
